<template>
  <div class="app-container">
    <el-card>
      <el-row>
        <el-col>
          <LiveOverview :tabs="realTimeData" @refresh="getHomeStatistics" />
        </el-col>
      </el-row>
    </el-card>

    <el-card class="chartBox">
      <LineChart
        :title="orderChartTitle"
        :xAxis="orderChartXAxis"
        :yAxis="orderChartYAxis"
        :legend="orderChartLegend"
        :series-data="orderChartSeriesData"
        :grid="orderChartGrid"
      />
    </el-card>

    <el-card class="chartBox">
      <div class="flex">
        <PieChart
          :series-obj="seriesObj"
          :legend="legend"
          :tooltip="tooltip"
          :color="color"
          height="180px"
        />

        <PieChart
          :series-obj="seriesObj"
          :legend="legend"
          :tooltip="tooltip"
          :color="color"
          height="180px"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { useFilterStatistics } from '@/hooks'
import { setToken } from '@/utils/auth'
// api
import { getMenu } from './api/index'
export default {
  name: 'Home',
  data() {
    return {
      realTimeData: [
        {
          isShow: true,
          baseData: {
            key: 'totalUserNum',
            label: '入库',
            value: ''
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'totalEtpNum',
            label: '出库',
            value: ''
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'totalOutlayAmount',
            label: '采购',
            value: ''
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'totalIncomeAmount',
            label: '订单',
            value: ''
          }
        }
      ],

      // 订单走势折线图相关
      orderChartTitle: {
        text: '订单走势（近一年）',
        left: '1%'
      },
      orderChartXAxis: {
        type: 'category',
        data: [],
        nameTextStyle: {
          width: 200
        }
      },
      orderChartYAxis: {
        type: 'value'
      },
      orderChartLegend: {
        icon: 'circle',
        data: ['销售订单走势']
      },
      orderChartGrid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      orderChartSeriesData: [
        {
          name: '销售订单走势',
          type: 'line',
          data: [],
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#7aa3ef'
              }
            }
          }
        }
      ],

      // 会员走势折线图相关
      memberChartTitle: {
        text: '会员走势（近一年）',
        left: '1%'
      },
      memberChartXAxis: {
        type: 'category',
        data: []
      },
      memberChartYAxis: {
        type: 'value'
      },
      memberChartLegend: {
        icon: 'circle',
        data: ['新注册', '活跃会员']
      },
      color: ['#7aa3ef', '#11840d'],
      memberChartSeriesData: [],

      // 图标配置
      legend: {
        orient: 'vertical',
        x: '50%',
        y: '50%',
        data: ['待审核', '驳回']
      },
      color: ['#709DEF', '#D1D1D1'],
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {d}%'
      },
      seriesObj: {
        name: '占比',
        type: 'pie',
        radius: ['50%', '70%'],
        center: ['30%', '60%'],
        label: {
          normal: {
            show: true,
            zlevel: 1,
            padding: [0, 8, 0, 8],
            backgroundColor: '#fff',
            position: 'center',
            formatter: ['{value|{d}%}', '{name|{b}}'].join('\n'),
            rich: {
              value: {
                color: '#303133',
                fontSize: 18,
                fontWeight: 'bold'
              },
              name: {
                color: '#303133'
              }
            }
          }
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '16',
            fontWeight: 'bold'
          }
        },
        // 图片数据
        data: [
          { value: 0, name: '待审核', key: 'pendReviewSum' },
          { value: 0, name: '驳回', key: 'rejectSum' }
        ]
      }
    }
  },
  // computed: {
  //   ...mapState('user', ['userInfo'])
  // },

  created() {
    this.handleToken()
    this.handleGetMenu()
  },

  methods: {
    // 接收、储存token
    handleToken() {
      let url = location.search
      let urlList = url.substring(1).split('&')
      let token = urlList[0].split('=')[1]
      console.log(token)
      setToken(token)
    },

    // 获取菜单
    async handleGetMenu() {
      const { data } = await getMenu()
      console.log(data)
    },

    // 处理电话号码
    doTelHide(tel) {
      if (!tel) {
        return ''
      }
      return tel.slice(0, 3) + '****' + tel.slice(tel.length - 4, tel.length)
    },

    async getHomeStatistics() {
      // const {
      //   data: {
      //     totalUserNum,
      //     totalEtpNum,
      //     totalOutlayAmount,
      //     totalIncomeAmount,
      //     orderLineData,
      //     userLineData
      //   }
      // } = await this.$http.home.getHomeStatistics()
      // // 销售订单
      // this.$set(
      //   this.orderChartXAxis,
      //   'data',
      //   orderLineData.map(item => item.time)
      // )
      // this.$set(this.orderChartSeriesData, 0, {
      //   ...this.orderChartSeriesData[0],
      //   data: orderLineData.map(item => Number(item.orderNum))
      // })
      // // 用户会员
      // this.$set(
      //   this.memberChartXAxis,
      //   'data',
      //   userLineData.map(item => item.time)
      // )
      // this.$set(this, 'memberChartSeriesData', [
      //   {
      //     name: '新注册',
      //     type: 'line',
      //     data: userLineData.map(item => Number(item.userRegisterNum))
      //   },
      //   {
      //     name: '活跃会员',
      //     type: 'line',
      //     data: userLineData.map(item => Number(item.userActiveNum))
      //   }
      // ])
      // 实时统计
      // const data = {
      //   baseData: {
      //     totalUserNum,
      //     totalEtpNum,
      //     totalOutlayAmount,
      //     totalIncomeAmount
      //   }
      // }
      // this.realTimeData = useFilterStatistics(this.realTimeData, data)
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  margin-top: 15px;
}
.info {
  margin-top: 15px;

  // 左侧头像
  &-left {
    width: 80px;
    height: auto;
    position: relative;
    span {
      display: flex;
      white-space: normal;
      width: 90px;
      height: 28px;
      line-height: 28px;
      border-radius: 4px;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: #fff;
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      background: $hw-bg-color;
    }
  }
  // 右侧文本
  &-right {
    padding-left: 20px;
    font-size: 16px;
    line-height: 30px;
    span {
      font-weight: bold;
    }
  }
}

.chartBox {
  margin-top: 20px;
}
</style>
